<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container>
        <el-container>
          <el-main>
            <el-row :gutter="20">
              <div class="newstyle">
                <el-col :span="24">
                  <el-row>
                    <div id="table3">
                      <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-style="getRowClass"
                        :header-row-style="getRowClass"
                        :header-cell-style="getRowClass2"
                      >
                        <el-table-column prop="name1" label="" width="180">
                        </el-table-column>
                        <el-table-column
                          prop="name2"
                          label="正向有功"
                          width="180"
                        >
                        </el-table-column>
                        <el-table-column prop="name3" label="反向有功">
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-row>
                </el-col>
              </div>
            </el-row>
          </el-main>
        </el-container>
      </el-container>

      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
import Index from '~/components/index2'
import Bottom from '~/components/bottom'
export default {
  data() {
    return {
      tableData: [
        {
          name1: '电表1',
          name2: '0.0',
          name3: '0.0kw',
          name4: '无'
        },
        {
          name1: '电表2',
          name2: '无',
          name3: '0.0kw',
          name4: '无'
        },
        {
          name1: '电表3',
          name2: '0.0v',
          name3: '3.6v',
          name4: '3.7v'
        },
        {
          name1: '电表8',
          name2: '0.0v',
          name3: '3.6v',
          name4: '3.7v'
        },
        {
          name1: '电表4',
          name2: '0.0v',
          name3: '3.6v',
          name4: '3.7v'
        },
        {
          name1: '电表4',
          name2: '0.0v',
          name3: '3.6v',
          name4: '3.7v'
        },
        {
          name1: '电表4',
          name2: '0.0v',
          name3: '3.6v',
          name4: '3.7v'
        },
        {
          name1: '电表4',
          name2: '0.0v',
          name3: '3.6v',
          name4: '3.7v'
        }
      ],

      // icon: require('@/assets/images/onlinecar.png'),
      // activeIndex: '3',
      activeIndex: '3',
      activeName: 'first'
    }
  },
  components: {
    Index,
    Bottom
  },
  computed: {},
  // watch: {
  //   event(curVal) {
  //     if (this['handle_' + curVal.name]) {
  //       this['handle_' + curVal.name](curVal.data)
  //     }
  //   },
  //   $route(val) {
  //     this.open()
  //   }
  // },
  created() {},

  mounted() {},

  methods: {
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return 'background:#052221;color:#FEFEFE;'
    },
    //设置表头颜色和背景
    getRowClass2({ row, column, rowIndex, columnIndex }) {
      return 'background:#052221;color:#FEFEFE;'
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },

    infoWindowClose(i) {
      //  alert("关闭提示窗"+i.showFlag)
      return (i.showFlag = false)
    },
    infoWindowOpen(i) {
      // alert("打开提示窗"+i.showFlag)
      return (i.showFlag = true)
    }
  }
}
</script>
<style lang="less" scoped>
#table3 {
  width: 1200px;
  height: 700px;
  // background-color: #444444;
}

.body {
  width: 100%;
  height: 100%;

  background-image: url(../../assets/images/新UI12.png);
  // background-color: rgb(0, 101, 105);
  // background-color: #005b5c;
}

.newstyle {
  // height: 700px;
  // background-image: url(../assets/images/table3.png);
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 0px;
  margin-top: 20px;

  border-radius: 20px;
  .el-row {
    margin-top: 15px;
    margin-left: 350px;
  }
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.aside {
  margin-left: 20px;
  margin-top: 20px;
  height: 560px;
}
.el-header {
  // background-color: #373d41;
  // display: flex;
  align-items: center;
}
</style>
